import { ExtractPropTypes, PropType } from "vue"
import { ImageMode, ImageModes } from '../../types/tuniao-ui'
import { validatorColorValue,  validatorSizeValue } from '../../utils'

/**
 * 轮播图列表数据
 */
export type SwiperData = {
  /** 图片地址 */
  image: string,
  /** 轮播图标题 */
  title?: string
}

/**
 * 指示器模式有效值
 */
const SwiperIndicatorModes = ['rect', 'round', 'dot', 'number'] as const
export type SwiperIndicatorMode = typeof SwiperIndicatorModes[number]

/**
 * 指示器位置有效值
 */
const SwiperIndicatorPositions = ['topLeft', 'topCenter', 'topRight', 'bottomLeft', 'bottomCenter', 'bottomRight'] as const
export type SwiperIndicatorPosition = typeof SwiperIndicatorPositions[number]

/**
 * props参数
 */
export const swiperProps = {
  /** 轮播图数据 */
  data: {
    type: Array as PropType<Array<SwiperData> | Array<string>>,
    default: () => {
      return []
    }
  },
  /** 初始化时显示的轮播图序号 */
  current: {
    type: [String, Number],
    default: 0
  },
  /** 高度, 单位rpx */
  height: {
    type: [String, Number],
    default: 250,
    validator: (value: string | number) => {
      return validatorSizeValue(value)
    }
  },
  /** 背景颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  bgColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('bg', value)
    }
  },
  /** 圆角的值, 单位rpx */
  radius: {
    type: [String, Number],
    default: 8
  },
  /** 指示器样式 rect 方形 round 圆角方形 dot 点 number 数字下标 */
  indicatorMode: {
    type: String,
    default: '',
    validator: (value: SwiperIndicatorMode | '') => {
      return value === '' || SwiperIndicatorModes.includes(value)
    }
  },
  /** 指示器位置 topLeft/topCenter/topRight/bottomLeft/bottomCenter/bottomRight */
  indicatorPosition: {
    type: String,
    default: 'bottomCenter',
    validator: (value: SwiperIndicatorPosition | '') => {
      return value === '' || SwiperIndicatorPositions.includes(value)
    }
  },
  /** 3D缩放效果 */
  effect3d: {
    type: Boolean,
    default: false
  },
  /** 3D缩放效果下, item之间的间隔, 单位为rpx */
  effect3dSpacing: {
    type: [String, Number],
    default: 50
  },
  /** 自动播放 */
  autoplay: {
    type: Boolean,
    default: true
  },
  /** 自动切换时间间隔 */
  interval: {
    type: Number,
    default: 5000
  },
  /** 滑动动画时长 */
  duration: {
    type: Number,
    default: 500
  },
  /** 是否采用衔接滑动 */
  circular: {
    type: Boolean,
    default: true
  },
  /** 滑动方向是否为纵向 */
  vertical: {
    type: Boolean,
    default: false
  },
  /** 图片模式mode，当图片为图片时生效 */
  imgMode: {
    type: String,
    default: 'scaleToFill',
    validator: (value: ImageMode) => {
      return ImageModes.includes(value)
    }
  },
  /** title标题自定义样式 */
  titleStyle: {
    type: Object,
    default: () => {
      return {}
    }
  },
  /** 前一个item的样式 */
  prevItemStyle: {
    type: Object,
    default: () => {
      return {}
    }
  },
  /** 后一个item的样式 */
  nextItemStyle: {
    type: Object,
    default: () => {
      return {}
    }
  },
  /** item样式 */
  itemStyle: {
    type: Object,
    default: () => {
      return {}
    }
  },
  /** 自定义组件样式 */
  customStyle: {
    type: Object,
    default: () => {
      return {}
    }
  }
}
export type SwiperProps = ExtractPropTypes<typeof swiperProps>

export const swiperEmits = {
  /** 点击事件 */
  click: (index: string | number) => typeof index === 'string' || typeof index === 'number',
  /** 轮播切换事件 */
  change: (current: string | number) => typeof current === 'string' || typeof current === 'number'
}
export type SwiperEmits = typeof swiperEmits
